<template>
  <a-modal
    title="人员管理"
    :width="850"
    :visible="visible"
    :destroyOnClose="true"
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <a-spin :spinning="confirmLoading">
      <a-alert
        v-if="alertVisable"
        showIcon
        banner
        message="保存人员信息失败,请检查人员信息是否填写正确或重复添加"
        type="error"
        closable
        @close="alertOnClose"
      />
      <a-form :form="form">
        <a-row :gutter="24">
          <a-col :span="14">
            <!-- 唯一编号 -->
            <a-row>
              <a-col :span="24">
                <a-form-item
                  :labelCol="labelCol"
                  :wrapperCol="wrapperCol"
                  label="身份识别号"
                >
                  <a-input-search
                    placeholder="输入人员身份识别号"
                    :disabled="editModel"
                    v-decorator="['idno', {rules: [{ required: true, message: '须填写身份识别号' }]}]"
                    @search="onSearch"
                    enterButton
                  />
                </a-form-item>
              </a-col>
            </a-row>
            <!-- 工号 -->
            <a-row>
              <a-col :span="24">
                <a-form-item
                  :labelCol="labelCol"
                  :wrapperCol="wrapperCol"
                  label="工号"
                >
                  <a-input-search
                    placeholder="输入人员工号"
                    :disabled="departmentInfoEdit"
                    v-model="empno"
                  />
                </a-form-item>
              </a-col>
            </a-row>
            <!-- 姓名  -->
            <a-row :gutter="24">
              <a-col :span="24">
                <a-form-item
                  label="姓名"
                  :labelCol="labelCol"
                  :wrapperCol="wrapperCol"
                >
                  <a-input :disabled="departmentInfoEdit" v-decorator="['personName', {rules: [{ required: true, message: '单位不能为空' }]}]" />
                </a-form-item>
              </a-col>
            </a-row>
            <!-- 手机号码 -->
            <a-row :gutter="24">
              <a-col :span="24">
                <a-form-item
                  label="手机号码"
                  :labelCol="labelCol"
                  :wrapperCol="wrapperCol"
                >
                  <a-input :disabled="departmentInfoEdit" v-decorator="['personMobile', {rules: [{ required: true, message: '手机号码不能为空' }]}]" />
                </a-form-item>
              </a-col>
            </a-row>
            <!-- 常用邮箱 -->
            <a-row :gutter="24">
              <a-col :span="24">
                <a-form-item
                  label="常用邮箱"
                  :labelCol="labelCol"
                  :wrapperCol="wrapperCol"
                >
                  <a-input :disabled="departmentInfoEdit" v-decorator="['personEmail', {}]" />
                </a-form-item>
              </a-col>
            </a-row>
            <!-- 性别 -->
            <a-row :gutter="24">
              <a-col :span="24">
                <a-form-item
                  label="性别"
                  :labelCol="labelCol"
                  :wrapperCol="wrapperCol"
                >
                  <a-radio-group :disabled="departmentInfoEdit" v-decorator="['personsex', {}]" >
                    <a-radio value="1">男</a-radio>
                    <a-radio value="0">女</a-radio>
                  </a-radio-group>
                  <!-- <a-input v-decorator="['personsex', {rules: [{ required: true, message: '单位全称不能为空' }]}]" /> -->
                </a-form-item>
              </a-col>
            </a-row>
            <!-- 出生日期 -->
            <a-row :gutter="24">
              <a-col :span="24">
                <a-form-item
                  label="出生日期"
                  format="YYYY-MM-DD"
                  :labelCol="labelCol"
                  :wrapperCol="wrapperCol"
                >
                  <!-- <a-date-picker @change="onChangeDate1" :format="dateFormat" :disabled="departmentInfoEdit" /> -->
                  <a-input :disabled="departmentInfoEdit" v-model="person.personBirthday" />
                </a-form-item>
              </a-col>
            </a-row>
          </a-col>
          <a-col :span="10">
            <!-- 省份 -->
            <!-- <a-row :gutter="24">
              <a-col :span="24">
                <a-form-item
                  label="省份"
                  :labelCol="labelCol"
                  :wrapperCol="wrapperCol"
                >
                  <a-select
                    showSearch
                    placeholder="Select a person"
                    optionFilterProp="children"
                    style="width: 200px"
                    @focus="handleFocus"
                    @blur="handleBlur"
                    @change="handleChange"
                    :filterOption="filterOption"
                    v-decorator="['pronv', {}]"
                  >
                    <a-select-option value="jack">Jack</a-select-option>
                    <a-select-option value="lucy">Lucy</a-select-option>
                    <a-select-option value="tom">Tom</a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
            </a-row> -->
            <!-- 所在城市 -->
            <!-- <a-row :gutter="24">
              <a-col :span="24">
                <a-form-item
                  label="所在城市"
                  :labelCol="labelCol"
                  :wrapperCol="wrapperCol"
                >
                  <a-input v-decorator="['city', {}]" />
                </a-form-item>
              </a-col>
            </a-row> -->
            <!-- 其他信息 -->
            <!-- 头像 -->
            <!-- <a-row :gutter="24">
              <a-col :span="24">
                <a-form-item
                  label="照片"
                  :labelCol="labelCol"
                  :wrapperCol="wrapperCol"
                >
                  <a-upload
                    name="avatar"
                    listType="picture-card"
                    class="avatar-uploader"
                    :showUploadList="false"
                    action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
                  >
                    <img v-if="imageUrl" :src="imageUrl" alt="avatar" stlye="width:200px;height:200px;"/>
                    <div v-else>
                      <a-icon :type="loading ? 'loading' : 'plus'" />
                      <div class="ant-upload-text">Upload</div>
                    </div>
                  </a-upload>
                </a-form-item>
              </a-col>
            </a-row> -->
            <a-row :gutter="24">
              <a-col :span="24">
                <a-form-item
                  label="其他信息"
                  :labelCol="labelCol"
                  :wrapperCol="wrapperCol"
                >
                  <a-textarea :disabled="departmentInfoEdit" :rows="4" v-decorator="['personDisc', {}]" />
                </a-form-item>
              </a-col>
            </a-row>
          </a-col>
        </a-row>
      </a-form>
    </a-spin>
  </a-modal>
</template>

<script>
import { getPersonInfoByPersonPid, savePersonInfo, addOrgMember, updateOrgMemberEmpno, getPersonByIdno } from './person'

export default {
  name: 'PersonModal',
  props: {
    // theOrgPid: { type: String, default: '' },
    // visible: { type: Boolean, default: false }
  },
  data () {
    return {
      // form: this.$form.createForm(this),
      dateFormat: 'YYYY-MM-DD',
      editModel: false,
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      },
      confirmLoading: true,
      alertVisable: false, // 错误提示框
      empno: null, // 工号
      ropSysSeq: 0, // 人员单位关系主键
      ropPid: '', // 人员单位关系pid
      departmentInfoEdit: false,
      person: {
        sysSeq: 0,
        pid: '', // 主键
        personBirthday: ''
        // idno: '', // 唯一编号
        // orgCode: '', // 单位代码
        // orgFullName: '',
        // orgName: '',
        // orgPopularName: '',
        // orgAddr: '',
        // orgBossName: '',
        // province: '',
        // city: '',
        // orgDisc: '',
        // orgLogo1: ''
      },
      theOrgPid: '',
      visible: false
    }
  },
  beforeCreate () {
    this.form = this.$form.createForm(this)
    console.log('form::', this.form)
  },
  created () {
  },
  methods: {
    // 搜索人员
    onSearch (value) {
      this.confirmLoading = true
      getPersonByIdno(value, {}).then(res => {
        this.confirmLoading = false
        if (res && res.code && res.code === 'C1' && res.data) {
          this.person.sysSeq = res.data.sysSeq
          this.person.pid = res.data.pid
          this.person.personBirthday = res.data.personBirthday
          this.form.setFieldsValue(res.data)
        }
      })
      .catch(() => {
        this.confirmLoading = false
      })
      this.departmentInfoEdit = false
      this.editModel = true
    },
    // 关闭提示
    alertOnClose () {
      this.alertVisable = false
    },
    showAddModal () {
      this.empno = ''
      this.person = {
        sysSeq: 0,
        pid: '', // 主键
        personBirthday: ''
      }
      this.ropPid = ''
      this.ropSysSeq = 0
      this.departmentInfoEdit = true
      this.editModel = false
      this.confirmLoading = false
      this.visible = true
    },
    // 查询人员信息
    findPersonInfo (personPid) {
      const headers = {}
      getPersonInfoByPersonPid(personPid, headers)
        .then(res => {
          if (res && res.code && res.code === 'C1' && res.data) {
            this.person.sysSeq = res.data.sysSeq
            this.person.pid = res.data.pid
            this.person.personBirthday = res.data.personBirthday
            this.form.setFieldsValue(res.data)
            this.confirmLoading = false
          }
          // console.log(this.orgInfo.sysSeq)
        })
    },
    // 编辑人员信息
    showEditModal (pid, sysSeq, ropPid, empno) {
      this.empno = empno
      this.ropSysSeq = sysSeq
      this.ropPid = ropPid
      if (pid) {
        this.departmentInfoEdit = false
        this.editModel = true
        this.confirmLoading = true
        this.alertVisable = false
        this.findPersonInfo(pid)
      }
      this.visible = true
    },
    close () {
      this.$emit('close')
      this.visible = false
    },
    handleOk () {
      const _this = this
      // 触发表单验证
      _this.form.validateFields((err, values) => {
        // 验证表单没错误
        if (!err) {
          console.log('form values', values)
          _this.confirmLoading = true
          new Promise((resolve) => {
            resolve(savePersonInfo(Object.assign(_this.person, _this.form.getFieldsValue()), {}))
          }).then(res => {
            if (res.code === 'C1') {
              if (_this.ropSysSeq === 0) {
                const orgMember = {
                  personPid: res.data.pid,
                  empno: _this.empno
                }
                addOrgMember(orgMember, {}).then((res1) => {
                  if (res1.code === 'C1') {
                    _this.$message.success('保存成功')
                    _this.$emit('ok')
                    _this.confirmLoading = false
                    _this.close()
                  } else {
                    _this.alertVisable = true
                    _this.confirmLoading = false
                  }
                })
              } else if (_this.empno) {
                const orgMember = {
                  sysSeq: _this.ropSysSeq,
                  pid: _this.ropPid,
                  empno: _this.empno
                }
                updateOrgMemberEmpno(orgMember, {}).then((res2) => {
                  if (res2.code === 'C1') {
                    _this.$message.success('保存成功')
                    _this.$emit('ok')
                    _this.confirmLoading = false
                    _this.close()
                  } else {
                    _this.alertVisable = true
                    _this.confirmLoading = false
                  }
                })
              } else {
                _this.$message.success('保存成功')
                _this.$emit('ok')
                _this.confirmLoading = false
                _this.close()
              }
            } else {
              _this.alertVisable = true
              _this.confirmLoading = false
            }
          }).catch(() => {
            // Do something
          })
        }
      })
    },
    handleCancel () {
      this.close()
      this.alertVisable = false
    }

  }
}
</script>

<style>
  .avatar-uploader > .ant-upload {
    width: 200px;
    height: 200px;
  }
  .ant-upload-select-picture-card i {
    font-size: 32px;
    color: #999;
  }

  .ant-upload-select-picture-card .ant-upload-text {
    margin-top: 8px;
    color: #666;
  }
</style>
